/*
 * @Description:
 * @Version: 2.0
 * @Author: godless
 * @Date: 2024-06-25 19:18:08
 * @LastEditors: godless
 * @LastEditTime: 2024-06-30 16:58:43
 */
const { defineConfig } = require("@vue/cli-service");
const defaultSettings = require("./src/settings.js"); // 标题 // 是否固定头部 // 是否显示侧边栏logo

const path = require("path");

const name = defaultSettings.title || "Godless - Vue2 Admin Template"; // 页面标题

const port = process.env.port || process.env.npm_config_port || 9527; // dev 端口号

// 配置路径别名
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = defineConfig({
  publicPath: "/", // 部署应用包时的基本 URL
  outputDir: "dist", // 输出文件目录
  assetsDir: "static", // 静态资源目录（js, css, img, fonts）
  lintOnSave: process.env.NODE_ENV === "development", // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  transpileDependencies: true, // 需要被编译的依赖

  devServer: {
    port: port, // 运行端口号q
    open: true, // 配置自动启动浏览器
  },

  configureWebpack: {
    name: name, // 页面标题
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
  },

  chainWebpack: (config) => {
    // 用于配置 Vue CLI 构建过程中的预加载（preload）功能。预加载是一种优化手段，它允许浏览器在实际需要之前提前加载某些资源，以加快页面加载速度和改善用户体验。
    // config.plugin("preload").tap(() => [
    //   {
    //     rel: "preload",
    //     // to ignore runtime.js
    //     // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
    //     fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
    //     include: "initial",
    //   },
    // ]);

    // 删除默认的 prefetch 插件配置。这个插件通常用于预取（prefetch）在当前导航期间可能需要的资源，以优化后续导航的加载速度。
    config.plugins.delete("prefetch");

    // 配置 svg-sprite-loader
    // 用于将多个 svg 文件合并成一个 sprite 文件，以减少 HTTP 请求数和提高页面加载速度。
    // 具体用法可以参考 svg-sprite-loader 的官方文档。
    config.module
      .rule("svg") // 匹配 svg 文件
      .exclude.add(resolve("src/icons")) // 排除 src/icons 目录下的 svg 文件
      .end();

    config.module
      .rule("icons")
      .test(/\.svg$/) // 匹配 svg 文件
      .include.add(resolve("src/icons")) // 指定 svg 文件所在的目录
      .end()
      .use("svg-sprite-loader") // 使用 svg-sprite-loader 加载器
      .loader("svg-sprite-loader") // 使用 svg-sprite-loader 加载器
      .options({ symbolId: "icon-[name]" }) // 配置 svg-sprite-loader 的选项
      .end();
  },
});
